
<template>
  <div 
    class="title-text" 
    :style="containerStyle"
  >
    <div 
      class="title-content"
      :style="titleStyle"
    >
      {{ data.text }}
    </div>

    <div 
      v-if="data.description"
      class="description-content"
      :style="descriptionStyle"
    >
      {{ data.description }}
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  return {
    backgroundColor: props.data.backgroundColor || 'transparent',
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    width: `${props.styles.width || 100}%`,
    border: props.data.borderWidth > 0 ? `${props.data.borderWidth}px solid ${props.data.borderColor || 'transparent'}` : 'none'
  }
})

// 计算标题样式
const titleStyle = computed(() => {
  return {
    fontSize: `${props.data.fontSize || 16}px`,
    fontWeight: props.data.fontWeight || 'normal',
    color: props.data.color || '#333333',
    textAlign: props.data.textAlign || 'left',
    lineHeight: (props.data.fontSize || 16) * 1.5 + 'px',
    padding: props.data.description ? '6px 0' : '6px 0'
  }
})

// 计算描述样式
const descriptionStyle = computed(() => {
  return {
    fontSize: `${(props.data.fontSize || 16) * 0.8}px`,
    fontWeight: props.data.descriptionWeight || 'normal',
    color: props.data.descriptionColor || '#666666',
    textAlign: props.data.textAlign || 'left',
    marginTop: '8px'
  }
})
</script>

<style lang="scss" scoped>
.title-text {
  box-sizing: border-box;
  padding: 0 14px;
  min-height: 20px;
  position: relative;

  .title-content {
    word-wrap: break-word;
    min-height: 10px;
  }

  .description-content {
    word-wrap: break-word;
    min-height: 10px;
  }
}
</style>
